<template>
	<div class="first-jhwcqk">
		<div class="titleBox">
			化工品生产计划完成情况
			<!-- <el-select class="titleSelect">
				<option value ="" label="其他化学品"></option>
			</el-select> -->
		</div>
		<el-row gutter="90" class="chartRow">
			<el-col :span="8">
				<div class="chartBox">
					<div id="jhwcqk-chart01" class="jhwcqk-chart" />
				</div>
			</el-col>
			<el-col :span="8">
				<div class="chartBox">

				</div>
			</el-col>
			<el-col :span="8">
				<div class="chartBox">

				</div>
			</el-col>
		</el-row>
	</div>
</template>
<script>
export default {
	props: {

	},
	data() {
		return {
			options: {
				tooltip: {
					formatter: '{a}%',
					showDelay: 0,
					hideDelay: 100
				},
				series: [
					{
					  name: 'Pressure',
					  type: 'gauge',
					  progress: {
						show: true
					},
					axisLine: {
						lineStyle: {       // 属性lineStyle控制线条样式
							color: [[0.5, '#017f8a'],[1, '#00ff59']],
							width: 20
						}
					},
					axisLabel: {
						show: false
					},
					axisTick: {
						show: false
					},
					splitLine: {
						show: false
					},
					pointer: {
						show: false
					},
					title: {
						show: false,
					},
					detail: {
						borderColor: '#fff',
						shadowColor: '#fff', //默认透明
						shadowBlur: 5,
						offsetCenter: [0, '70%'],       // x, y，单位px
						textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
							fontWeight: 'bolder',
							fontSize: 26,
							color: '#01fff8'
						}
					},
					data: [
						{
						  value: 50,
						  name: 'SCORE'
						}
					  ]
					}
				]
			}

		}
	},
	mounted() {
		this.init();
	},
	methods: {
		init() {
			this.setCharts01();
		},
		setCharts01() {
			let _lineChart = this.$echarts.init(document.getElementById('jhwcqk-chart01'));
			_lineChart.setOption(this.options)
		}
	}
}
</script>
<style lang="scss" scoped>
	// .first-jhwcqk {
	// 	.titleBox {
	// 		width: 100%;
	// 		height: 94px;
	// 		line-height: 94px;
	// 		background-color: #2b5ea0;
	// 		position: relative;
	// 		padding: 0 50px 0 63px;
	// 		box-sizing: border-box;
	// 		font-size: 36px;
	// 		color: #ffffff;

	// 		&::before {
	// 			content: '';
	// 			width: 12px;
	// 			height: 100%;
	// 			position: absolute;
	// 			left: 0;
	// 			top: 0;
	// 			background-color: #00ffc1;
	// 		}
	// 	}

	// 	.titleSelect {
	// 		.el-input__inner {
	// 			height: 44px;
	// 			width: 205px;
	// 		}
	// 	}

	// 	.chartRow {
	// 		margin-top: 38px;
	// 		margin-left: 12px;

	// 		.chartBox {
	// 			width: 401px;
	// 			height: 146px;
	// 			background-color: #0075c5;
	// 		}

	// 		.jhwcqk-chart {
	// 			width: 175px;
	// 			height: 135px;
	// 		}
	// 	}
	// }
</style>
